<template>
    <div class="dashboard-container">
        <ElContainer>
            <ElAside :class="asideClass">
                <ASide></ASide>
            </ElAside>
            <ElContainer>
                <ElHeader class="dashboard-header">
                    <VHeader></VHeader>
                </ElHeader>
                <ElMain class="dashboard-main" ref="mainContainer">
                    <!-- <TagsView ref="mainTagesView"></TagsView> -->
                    <transition name="move" mode="out-in">
                        <div style="height:100%">

                            <router-view></router-view>
                            <!-- 如果需要缓存，可使用keep-alive -->

                        </div>
                    </transition>
                </ElMain>
                <!-- <ElFooter>
                    <VFooter></VFooter>
                </ElFooter> -->
            </ElContainer>
        </ElContainer>
    </div>
</template>
<script setup lang="ts">
import { ElContainer, ElHeader, ElAside, ElFooter, ElMain } from 'element-plus';
import { computed, onMounted, ref, watch } from 'vue'
import VHeader from '@/components/layout/Header.vue'
import ASide from '@/components/layout/ASide.vue'
import TagsView from '@/components/layout/TagsView.vue';
import { useRoute } from 'vue-router';
import { isCollapseMenu } from '@/common/theme';

const route = useRoute()
const mainTagesView = ref()
const mainContainer = ref()
const mainContentHeight = ref('0px')
onMounted(() => {

})
const asideClass = computed(() => {
    return `${!isCollapseMenu() ? 'dashboard-aside' : 'dashboard-aside-collapse'}`
})


const handleCollapseMenu = (v: boolean) => {
}
</script>
<style lang="scss" scoped>
$window-height: 98vh;
$window-width: 100vw;

.dashboard-container {
    height: $window-height;
    width: $window-width;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    background-color: var(--app-content-bg-color);

    @mixin aside-menu {
        height: $window-height;
        border-right: 1px solid var(--border-color);
        background-color: var(--left-menu-bg-color);
        width: var(--left-menu-max-width);
    }

    .dashboard-aside {
        @include aside-menu();
        transition: width var(--transition-time-02);
    }

    .dashboard-aside-collapse {
        @include aside-menu();
        width: var(--left-menu-min-width) !important;
        transition: width var(--transition-time-02);
    }

    .dashboard-header {
        border-bottom: 1px solid var(--border-color);
        z-index: 1100;
        background-color: var(--top-header-bg-color);
        padding: 0 !important;
    }



    .dashboard-main {
        // border-bottom: 1px solid var(--border-color);
        padding: var(--app-content-padding);
        overflow-y: auto;
        background-color: var(--app-content-bg-color);
    }
}
</style>